import highlight from '@bytemd/plugin-highlight'
import 'bytemd/dist/index.min.css' //引入样式
import { useState } from 'react'
import zhHans from "bytemd/lib/locales/zh_Hans.json";//引入中文包
import { Editor } from '@bytemd/react';
import style from './style.module.less'
import { Button,Input,message, Popconfirm } from 'antd';
import { DoubleLeftOutlined } from '@ant-design/icons';
import Tags from '../../components/Tags';
import gfm from '@bytemd/plugin-gfm';
import mediumZoom from "@bytemd/plugin-medium-zoom";
import gemoji from "@bytemd/plugin-gemoji";
import { addArticle, upload } from '../../services/api';
import Title from 'antd/lib/typography/Title';
import { Link, useHistory } from 'react-router-dom';
import Banner from '../../components/Banner';

const plugins = [
    gfm(),
    mediumZoom(),
    gemoji(),
    highlight() //代码高亮
]
export default function Add() {
    let history = useHistory();
    const [content, setContent] = useState('');  //内容
    const [visible, setVisible] = useState(false); //发布确认框可视
    const [confirmLoading, setConfirmLoading] = useState(false);//发布等待动画
    const [title, setTitle] = useState('');  //标题
    const [subTitle,setSubTitle]=useState('') //副标题
    const [tagsChild, setTagsChild] = useState<string[]>([]); //标签
    const [banner,setBanner]=useState<string[]>([]);  //横幅
    //检查数据
    const check = () => {
        if (!title) {
            message.error('请输入标题')
            return false;
        }
        if(tagsChild.length===0){
            message.error('请添加标签')
            return false;
        }
        if(!content){
            message.error('请输入文章内容')
            return false;
        }
        return true;
    }
    //发布前提示框;在确认发布之前检查数据
    const showPopconfirm = () => {
        if (check()) {
            setVisible(true);
        }
    };
    //发布
    const handleOk = () => {
        setConfirmLoading(true);
        addArticle({
            title: title,
            content: content,
            tags: tagsChild,
            banner:banner,
            subTitle:subTitle
        }).then((res)=>{
            if(res.stat==='ok'){
                setVisible(false);
                setConfirmLoading(false);
                history.push("/Person")
            }else{
                message.error('添加失败')
            }
        })
        
    };
    const handleCancel = () => {
        setVisible(false);
    };
    //获取tags
    const getTags = (tags: string[]) => {
        setTagsChild(tags)
    }
    //获取横幅
    const getBanner=(banner:string[])=>{
        setBanner(banner)
    }
    return (
        <div className={style.wrap}>
            <div className={style.head}>
                <Title>
                    <input type="text"
                        maxLength={15}
                        placeholder="标题"
                        className={style.title}
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                    />
                </Title>
                <Banner getBanner={getBanner}></Banner>
            </div>
            <Input 
                placeholder="副标题" 
                bordered={false} 
                maxLength={40}
                style={{paddingLeft:5,paddingTop:0}}
                value={subTitle}
                onChange={(e)=>{setSubTitle(e.target.value)}}
            />
            <div>
                <span>标签：</span>
                <Tags getTags={getTags} />
                <span className={style.tip}>最多四个标签，标签可以让别人方便看到哦！</span>
            </div>
            <Editor
                locale={zhHans} //语言
                value={content}   //内部的值
                plugins={plugins}  //插件
                onChange={(v) => {  //动态修改值
                    setContent(v)
                }}
                uploadImages={async (files) => {
                    let formData = new FormData();
                    formData.append("imgs", files[0]);
                    let key = (await upload(formData)).data
                    return [{
                        url: '/api/file/preview/' + key,
                        type: "image"
                    }]
                }}
            />
            <Popconfirm
                title="是否确认添加?"
                visible={visible}
                onConfirm={handleOk}
                okButtonProps={{ loading: confirmLoading }}
                onCancel={handleCancel}
            >
                <Button onClick={showPopconfirm} className={style.btn}>完成</Button>
            </Popconfirm>
            <Link to="/Person" className={style.return}><DoubleLeftOutlined />返回</Link>
        </div>
    )
}